1. 什麼是 Ngrok？

Ngrok 是一款開源工具，用來將本地開發環境臨時暴露到公網。對於開發者來說，當你在本地進行測試並希望外部服務（如 Line Bot、Webhook、第三方 API 等）訪問你的本地伺服器時，Ngrok 是一個簡單且強大的解決方案。

2. Ngrok 的應用場景

• 測試 Webhook 回調（如 Line Bot 開發）
• 在團隊中分享本地開發的應用
• 本地伺服器測試第三方 API 集成

本文將演示如何使用 Ngrok 將本地的 Flask 應用 (運行於 port 5000) 暴露到公網。

3. Ngrok 與 Flask 整合步驟

步驟 1：安裝 Ngrok

首先，從官方網站下載 Ngrok 並安裝。

• Ngrok 官方下載頁面

下載並解壓後，在終端中將其加入環境變量或直接運行。

步驟 2：編寫 Flask 應用

假設我們已經有一個簡單的 Flask 應用程式，運行在本地端的 5000 埠口。

# app.py
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def home():
    return "Flask app is running on port 5000!"

@app.route('/webhook', methods=['POST'])
def webhook():
    data = request.get_json()
    return f"Received webhook data: {data}", 200

if __name__ == '__main__':
    app.run(port=5000)

這個簡單的 Flask 應用有兩個路由：

1. /：回傳簡單的文本，確認 Flask 伺服器正在運行。
2. /webhook：用來接收 Webhook 事件的 POST 請求。

步驟 3：啟動 Flask 伺服器

在終端中運行 Flask 應用：

python app.py

此時，Flask 伺服器應該會在 localhost:5000 上運行。你可以打開瀏覽器並輸入 http://localhost:5000 來確認 Flask 是否正常工作。

步驟 4：使用 Ngrok 暴露本地伺服器

Ngrok 可以幫助你將本地的 Flask 伺服器暴露到互聯網。打開另一個終端窗口，運行以下命令：

ngrok http 5000

這條命令告訴 Ngrok 將你的本地 localhost:5000 端口映射到互聯網上的一個動態生成的 URL。運行成功後，Ngrok 會返回一個外部的 URL，類似於這樣：

ngrok by @inconshreveable                                                                        

Session Status                online                                                                        
Version                       2.3.40                                                                        
Region                        United States (us)                                                             
Web Interface                 http://127.0.0.1:4040                                                          
Forwarding                    http://abc123.ngrok.io -> http://localhost:5000                                
Forwarding                    https://abc123.ngrok.io -> http://localhost:5000

其中，http://abc123.ngrok.io 就是暴露在互聯網上的 URL，你可以通過這個網址訪問本地的 Flask 應用。

步驟 5：測試外部訪問

你現在可以打開瀏覽器，輸入 Ngrok 提供的 URL 來訪問你的 Flask 應用。例如，打開 http://abc123.ngrok.io，你應該會看到：

Flask app is running on port 5000!

如果你想測試 Webhook，將 POST 請求發送到 http://abc123.ngrok.io/webhook 即可，Ngrok 會將這個請求轉發到你本地的 Flask 應用。

步驟 6：使用 Ngrok Web 介面監控請求

Ngrok 提供了一個非常有用的 Web 介面，位於 http://127.0.0.1:4040。這個介面可以讓你看到所有通過 Ngrok 進來的請求，包括請求的具體內容，方便進行測試和調試。

4. 小結

Ngrok 是一個非常有用的工具，尤其是在進行本地開發並需要與外部服務互動時。通過 Ngrok，我們可以輕鬆地將本地的 Flask 伺服器臨時暴露到互聯網，並測試 Webhook、外部 API 等功能。以下是主要步驟回顧：

1. 安裝 Ngrok
2. 寫好 Flask 應用並運行在本地 (localhost:5000)
3. 使用 Ngrok 將 localhost:5000 映射到外部網址
4. 測試外部訪問，確保伺服器運行正常